<template>
  <div class="page-report">
    <div class="report-content">
      <div class="content-left">
        <el-select class="projectValue" 
          v-model="houseForm.projectId" 
          placeholder="请选择"
          @change="projectChange"
        >
          <el-option 
            v-for="item in projectOption" 
            :key="item.id" 
            :label="item.projectName" 
            :value="item.id" 
          />
        </el-select>
        <div class="roomData">
          <el-tree
            ref="treeRef"
            style="max-width: 200px"
            :data="roomList.list"
            :props="defaultProps"
            node-key="id"
            show-checkbox
            default-expand-all
            @check="getCheckedKeys"
          />
        </div>
      </div>
      <div class="content-right">
        <div class="right-tabs">
          <el-radio-group v-model="tabSelect"  @change="tabSelectChange">
            <el-radio-button label="数据报表" value="data" />
            <el-radio-button label="批量补抄" value="batch" />
          </el-radio-group>
        </div>
        <ReportData 
          ref="dataRef"
          v-if="tabSelect == 'data'" 
        />
        <ReportBatch 
          ref="batchRef"
          v-else 
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getProjectList, getHouseList, } from '@/api/settle';
import ReportData from "./ReportData.vue";
import ReportBatch from "./ReportBatch.vue";

// 主tab 默认数据报表data 切换后为批量补抄
const tabSelect = ref('data')

const dataRef = ref(null)
const batchRef = ref(null)

const projectOption = ref([])
const houseForm = reactive({
  projectId: null,
  houseIdList: [] as any
})
getProjectList()
.then((res: any)=>{
  projectOption.value = res.data ?? []
  if (projectOption.value.length > 0) {
    houseForm.projectId = projectOption.value[0].id
    // 延迟赋值项目id
    if (tabSelect.value == 'data') {
      dataRef.value.dataFilter.projectId = houseForm.projectId
    } else {
      batchRef.value.houseProps.projectId = houseForm.projectId
    }
    getHouse()
  }
})

const treeRef = ref(null)
const defaultProps = {
  label: 'houseNum',
}

const roomList = reactive({
  list: [{
    houseNum: '所有房间',
    children: []
  }] 
})

// 获取房间列表
const getHouse = () => {
  const params = {
    id: houseForm.projectId
  }
  getHouseList(params)
  .then((res)=>{
    roomList.list[0].children = res.data ?? []
    // console.log('roomList.list', roomList.list)
    houseForm.houseIdList = []
    if (roomList.list[0].children.length > 0) {
      setTimeout(()=>{
        treeRef.value!.setCheckedKeys([roomList.list[0].children[0].id], true)
      },200)
      houseForm.houseIdList = [roomList.list[0].children[0].id]
      if (tabSelect.value == 'data') {
        dataRef.value.dataFilter.houseIdList = [roomList.list[0].children[0].id]
        setTimeout(()=>{
          dataRef.value.onSearch()
        },200)
      } else {
        batchRef.value.houseProps.houseIdList = [roomList.list[0].children[0].id]
        // 批量补抄选中后触发查询
        setTimeout(()=>{
          batchRef.value.onSearch()
        },200)
      }
    }
  })
  .catch((err)=> {
    roomList.list[0].children.length = 0
  })
}

// flag：搜索出来后是否默认选中第一个
const projectChange = () => { 
  // 已选择的重置
  treeRef.value!.setCheckedKeys([], false)
  if (tabSelect.value == 'data') {
    dataRef.value.dataFilter.projectId = houseForm.projectId
  } else {
    batchRef.value.houseProps.projectId = houseForm.projectId
  }
  getHouse()
}

const getCheckedKeys = () => {
  if (tabSelect.value == 'data') {
    // console.log('选中的房间', treeRef.value!.getCheckedKeys(true))
    houseForm.houseIdList = treeRef.value!.getCheckedKeys(true)
    Object.assign(dataRef.value.dataFilter, houseForm)
    // 数据报表选中后触发查询
    dataRef.value.onSearch()
  } else {
    // console.log('选中的房间', treeRef.value!.getCheckedKeys(true))
    houseForm.houseIdList = treeRef.value!.getCheckedKeys(true)
    Object.assign(batchRef.value.houseProps, houseForm)
    // 批量补抄选中后触发查询
    batchRef.value.onSearch()
  }
  
}

const tabSelectChange = (e: string) => { 
  console.log('houseForm', houseForm)
  console.log('当前', e)
  if (e == 'data') {
    Object.assign(dataRef.value.dataFilter, houseForm)
    setTimeout(()=>{
      dataRef.value.onSearch()
    },500)
  } else {
    // 每次都是首次加载
    Object.assign(batchRef.value.houseProps, houseForm)
    setTimeout(()=>{
      batchRef.value.onSearch()
    },500)
  }
}

</script>

<style lang="scss" scoped>
:deep(.el-tree-node__expand-icon) {
  padding-right: 0;
  > svg {
    display: none;
  }
}
:deep(.el-tree-node__children) {
  .el-tree-node__expand-icon {
    display: none;
  }
}
.page-report {
  padding: 20px;
  background: #F2FBF9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .report-content {
    position: relative;
    min-height: calc(100vh - 130px);
    padding: 24px 16px 24px 0px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    .content-left {
      position: absolute;
      width: 216px;
      height: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      border-right: 1px solid #EFF5F4;
      .roomData {
        overflow: auto;
      }
      .projectValue {
        width: 184px;
        margin: 16px 16px 11px;
      }
    }

    .content-right {
      margin-left: 216px;
      padding-left: 15px;
      .right-tabs {
        margin-bottom: 11px;
      }
    }
  }
}

</style>